import { Component, AfterViewInit,ViewChild } from '@angular/core';
import {MatPaginator} from '@angular/material/paginator';
import {DataSource} from '@angular/cdk/collections';
import {HttpClient} from '@angular/common/http';
//import {BehaviorSubject,Observable} from 'rxjs';
import {MatTableDataSource} from '@angular/material/table';

@Component({
  selector: 'app-staff-page',
  templateUrl: './staff-page.component.html',
  styleUrls: ['./staff-page.component.css']
})
export class StaffPageComponent implements AfterViewInit {
  constructor(public http:HttpClient) { }
  displayedColumns: string[] = ['staffId','staffName','staffAge','staffGender','staffInTime'];
  dataSource=new MatTableDataSource<StaffElement>(ELEMENT_DATA);
  @ViewChild(MatPaginator) paginator:MatPaginator;

  ngAfterViewInit(){
    let api='https://localhost:44312/api/staff'
    this.http.get(api).subscribe((res:any)=>{
      console.log(res);
      ELEMENT_DATA=res;
      this.dataSource=new MatTableDataSource<StaffElement>(ELEMENT_DATA);
      this.dataSource.paginator=this.paginator;
    })
    
  }
  

}

export interface StaffElement{
  staffId:number;
  staffName:string;
  staffAge:number;
  staffGender:boolean;
  staffInTime:Date;
}
var ELEMENT_DATA:StaffElement[]=[
//   {staffId:1,staffName:'111',staffAge:12,staffGender:true,staffInTime:new Date()},
//   {staffId:2,staffName:'22',staffAge:12,staffGender:true,staffInTime:new Date()},
//   {staffId:3,staffName:'133',staffAge:12,staffGender:true,staffInTime:new Date()},
//   {staffId:101,staffName:'331',staffAge:12,staffGender:true,staffInTime:new Date()},
//   {staffId:105,staffName:'1441',staffAge:12,staffGender:true,staffInTime:new Date()}
//   ,{staffId:107,staffName:'551',staffAge:12,staffGender:true,staffInTime:new Date()}
//   ,{staffId:108,staffName:'661',staffAge:12,staffGender:true,staffInTime:new Date()}
 ]; 






